<template>
  <div class="hs-es">
    <div class="hs-es-wrap" id="es-root"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import 'echarts-wordcloud';
let option = {
  //设置标题，居中显示
  title: {
    show: false,
    text: "词云图",
    left: "center",
  },
  //数据可以点击
  tooltip: {},

  series: [
    {
      maskImage: null,
      //词的类型
      type: "wordCloud",
      //设置字符大小范围
      sizeRange: [10, 68],
      // sizeRange: [40, 40],
      rotationRange: [0, 0],
      textStyle: {
        normal: {
          //生成随机的字体颜色
          color: function () {
            return (
              "rgb(" +
              [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
              ].join(",") +
              ")"
            );
          },
        },
      },
      //不要忘记调用数据
      data: [],
    },
  ],
};

export default {
  name: "enterpriseShow",
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(function () {
      // this.drawer();
      this.drawerEcharts("es-root");
    });
    this.$store.watch(
      (state, getter) => {
        return state.statistical.enterpriseShow;
      },
      () => {
        console.log('watch enterprise')
        this.drawerEcharts("es-root");
      }
    );
  },
  methods: {
    drawerEcharts(id) {
      const image1 =
        "";

      let maskResource = new Image();
      maskResource.src = image1;
      let o = document.getElementById(id);
      let height = o.clientHeight;
      let width = o.clientWidth;
      o.style.height = height + "px";
      o.style.width = width + "px";
      this.chart = echarts.init(o, null);
      option.series[0].maskImage = maskResource;
      option.series[0].data = this.$store.state.statistical.enterpriseShow;
      this.chart.setOption(option);
    },
  },
  beforeDestroy() {},
};
</script>

<style scoped>
.hs-es {
  /* border: 2px solid rgb(0, 255, 55); */
  position: relative;
  /* width: 976px;
  height: 600px; */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hs-es-wrap {
  /* width: 770px;
  height: 500px; */
  width: 100%;
  height: 100%;
  position: relative;
  margin-top: 100px;
  /* border-radius: 50%; */
  overflow: hidden;
  /* border: 1px solid rgb(255, 145, 0); */
}
</style>